<template>
  <div :class="['issue', activeData?.type && `is-${activeData?.type}`]">
    <div class="issue-from">
      <component :is="activeData.component" :key="activeData.state" />
    </div>
    <div class="issue-content">
      <div class="issue-content__square">
        <el-button @click="next">状态修改</el-button>
        <img src="@/assets/images/u35.png"/>
      </div>
      <div class="issue-content__name">保函状态：{{ activeData.name }}</div>
      <el-button
        class="issue-content__operate"
        v-if="activeData.but"
        @click="activeData.but?.click"
      >{{ activeData.but.text }}</el-button>
    </div>
  </div>
</template>

<script setup>
// 表单信息
import From from './components/from.vue'
// 保函预览-已生效
import Preview from './components/preview.vue'
// 已注销-退费信息
import Refund from './components/refund.vue'

// 当前状态
const stateActive = ref(1)
// 状态
const stateData = reactive([
  {
    state: 1,
    component: markRaw(From),
    name: '银行反馈文本修改',
    but: {
      text: '确认修改结果',
      click: () => {
        console.log('确认修改结果')
      }
    }
  },
  {
    state: 2,
    component: markRaw(From),
    name: '开具中',
  },
  {
    state: 3,
    component: markRaw(From),
    name: '注销重开中',
    but: {
      text: '手续费确认',
      click: () => {
        console.log('手续费确认')
      }
    }
  },
  {
    state: 4,
    component: markRaw(Preview),
    type: 'success',
    name: '已生效',
    but: {
      text: '保函预览',
      click: () => {
        console.log('保函预览')
      }
    }
  },
  {
    state: 5,
    component: markRaw(Refund),
    type: 'error',
    name: '已注销',
    but: {
      text: '了解详情',
      click: () => {
        console.log('了解详情')
      }
    }
  },
])
// 获取状态数据
const activeData = computed(() => {
  return stateData.find(x => x.state == stateActive.value)
})



// 设置当前步骤状态
const setStatus = inject('setStatus')
// 模仿
const next = () => {
  stateActive.value++
  if (stateActive.value > 5) {
    stateActive.value = 1
  }
  // 设置状态
  setStatus(activeData.value?.type)
}
</script>

<style lang="scss" scoped>
.issue{
  display: flex;
  justify-content: space-between;
  column-gap: 100px;
  max-width: 1200px;
  margin: 0 auto;
  --color-type: var(--el-color-primary);
  &.is-success{ // 已生效
    --color-type: #377B1F;
  }
  &.is-error{ // 注销
    --color-type: #D81E06;
    flex-direction: row-reverse;
  }
  &-from{
    flex: 1;
    padding-top: 30px;
  }
  &-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    &__square{
      width: 540px;
      height: 500px;
      margin: 0 20px;
      border: 6px solid var(--color-type);
      border-radius: 10px;
      overflow: hidden auto;
      box-sizing: border-box;
      letter-spacing: normal;
      text-transform: none;
      text-align: center;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35) ;
      img{
        width: 100%;
      }
    }
    &__name{
      margin: 20px 0;
      font-weight: 700;
      font-size: 24px;
      color: var(--color-type);
    }
    &__operate{
      height: 45px;
      width: 200px;
      font-weight: 700;
      font-size: 20px;
      color: #F9F9F9;
      border-color: var(--color-type);
      background-color: var(--color-type);
    }
  }
}
</style>
